<script setup lang="ts">
import DishItemBar from '@/pages/dishManagement/components/DishItemBar.vue'
import UvVtabs from '@/uv-ui/components/uv-vtabs/components/uv-vtabs/uv-vtabs.vue'
import UvVtabsItem from '@/uv-ui/components/uv-vtabs/components/uv-vtabs-item/uv-vtabs-item.vue'

function handleClickLeft() {
  uni.navigateBack()
}

const list = ref([] as any)
const { ctx } = getCurrentInstance()
const dishBarHeight = ref(0)
const contentWidth = ref(0)
onReady(() => {
  // 模拟接口请求数据
  uni.showLoading({
    title: '加载中',
  })
  ctx.$uv.getRect('.dish-bar').then((res) => {
    dishBarHeight.value = res.height
  })
  ctx.$uv.getRect('.dish-content').then((res) => {
    console.log(res)
    contentWidth.value = res.width
  })
  setTimeout(() => {
    getList()
    uni.hideLoading()
  }, 500)
})

function getList() {
  list.value = [
    {
      name: '川菜',
      level: 1,
      childrens: [
        {
          name: '蒸菜',
          childrens: [
            {
              name: '蒸鲤鱼',
            },
            {
              name: '蒸排骨',
            },
          ],
        },
        {
          name: '炒菜',
          childrens: [
            {
              name: '宫保鸡丁',
            },
            {
              name: '麻婆豆腐',
            },
          ],
        },
      ],
    },
  ]
}

function handleClickToCategory() {
  uni.navigateTo({
    url: '/pages/dishCategory/index',
  })
}
</script>

<template>
  <view class="h-full flex flex-col overflow-hidden">
    <wd-navbar title="菜品库" left-text="返回" left-arrow @click-left="handleClickLeft">
      <template #right>
        <navigator url="/pages/dishManagement/dishSearch" hover-class="icon-hover">
          <view class="i-icon-park-outline-search" />
        </navigator>
        <navigator url="/pages/dishManagement/dishFilter" hover-class="icon-hover">
          <view class="i-icon-park-outline-filter ml-4" />
        </navigator>
      </template>
    </wd-navbar>
    <view class="dish-bar flex-1 overflow-hidden">
      <uv-vtabs :chain="true" :list="list" :height="dishBarHeight">
        <view class="dish-content box-border">
          <template v-for="(item, index) in list" :key="index">
            <uv-vtabs-item :index="index">
              <view v-for="ic in item.childrens" :key="ic.name">
                <wd-sticky>
                  <view
                    class="box-border h-7 flex justify-between px-2 leading-7"
                    :style="{
                      width: `${contentWidth}px`,
                    }"
                  >
                    <wd-text :text="ic.name" size="12px" />
                    <navigator url="/pages/dishManagement/dishSort">
                      <wd-text text="排序" size="12px" color="red" />
                    </navigator>
                  </view>
                </wd-sticky>
                <view v-for="dish in ic.childrens" :key="dish.name" class="mb-3 pl-2">
                  <dish-item-bar>
                    <wd-icon name="arrow-right" custom-class="mr-2" size="16px" color="#aaa" />
                  </dish-item-bar>
                </view>
              </view>
            </uv-vtabs-item>
          </template>
        </view>
      </uv-vtabs>
    </view>
    <wd-tabbar>
      <wd-tabbar-item title="分类管理" icon="app" name="category" @click="handleClickToCategory" />
      <wd-tabbar-item title="新建菜品" icon="add" name="add" />
    </wd-tabbar>
  </view>
</template>

<style scoped lang="scss">
.item {
  padding: 10rpx 20rpx;
  &-title {
    .text {
      font-size: 32rpx;
      font-weight: 700;
      color: #111;
    }
  }
  &-content {
    padding: 20rpx 0;
    .text {
      font-size: 30rpx;
      line-height: 48rpx;
      color: #111;
      /* #ifndef APP-NVUE */
      word-break: break-all;
      /* #endif */
    }
  }
}
</style>
